<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link href="http://cdn.bootcss.com/openlayers/4.0.1/ol.css" rel="stylesheet">
    <title>纽约出租车上车点</title>

    <style type="text/css">
        #loading {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -130px;
            text-align: center;
            margin-top: -50px;
            width: 260px;
            padding: 20px;
            background: rgba(0, 0, 0, 0.5);
            color: yellow;
            font-size: 12pt;
        }

        .ol-popup {
            position: absolute;
            top: 10px;
            right: 10px;
        }
    </style>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%">
<div id="popup" class="ol-popup" style='width:20%'>
</div>
<div id="map" style="width: 100%;height:100%"></div>
<div id="loading">纽约出租车145万上车点数据加载中...</div>
<script src="http://cdn.bootcss.com/openlayers/4.0.1/ol-debug.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="http://mapv.baidu.com/build/mapv.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/dat-gui/0.6.5/dat.gui.js"></script>
<script type="text/javascript" src="../../dist/iclient9-openlayers.min.js"></script>
<script type="text/javascript">
    var token = "pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw",
            mbUrl = 'https://api.tiles.mapbox.com/v4/mapbox.light/{z}/{x}/{y}.png?access_token=' + token;
    var map = new ol.Map({
        target: 'map',
        view: new ol.View({
            center: [-73.931577, 40.745654],
            zoom: 12,
            projection: 'EPSG:4326'
        })
    });
    map.addLayer(new ol.layer.Tile({
        source: new ol.source.XYZ({
            url: mbUrl,
            attributions: [
                new ol.Attribution({
                    html: ' Imagery © <a href="http://mapbox.com">Mapbox</a>'
                })]
        })
    }));
    $.get('../data/nyc-taxi.csv', function (csvstr) {
        var dataSet = mapv.csv.getDataSet(csvstr);
        dataSet.initGeometry();
        var mapvOptions = {
            size: 1.5,
            context: 'webgl',
            fillStyle: 'rgba(250, 50, 50, 0.8)',
            draw: 'simple'
        };
        var options = {map: map, dataSet: dataSet, mapvOptions: mapvOptions, attributions: [
            new ol.Attribution({
                html: ' 数据来源 <a href="http://www.nyc.gov/html/tlc/html/about/trip_record_data.shtml/">NYCTaxi(纽约出租车上车点)</a>  © 2017 百度 MapV with <a href="http://iclient.supermapol.com/">SuperMap iClient</a>'
            })]};
        var layer = new ol.layer.Image({
            source: new ol.source.Mapv(options)
        });
        $('#loading').hide();
        initDatGUI(layer, mapvOptions);
        map.addLayer(layer);
    });

    //设置菜单
    function initDatGUI(layer, options) {
        var gui = new dat.GUI();
        var popup = document.getElementById('popup');
        popup.appendChild(gui.domElement);
        gui.add(options, 'size', 0.1, 10).onFinishChange(finished);
        gui.addColor(options, 'fillStyle').onChange(finished);
        function finished() {
            layer.getSource().update(options);
        }

        var control = new ol.control.Control({element: popup});
        control.setMap(map);
        map.addControl(control);
    }
</script>
</body>
</html>
